<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<c:set var="path" value="${pageContext.request.contextPath}" />
<!DOCTYPE html>
<html>

	<head>
		<meta http-equiv="Content-Type" content="text/html; Charset=utf-8" />
		<meta http-equiv="Content-Language" content="zh-CN" />
		<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no" />
		<title>ZHI-一个java程序员的个人博客网站</title>
		<link rel="shortcut icon" href="images/logo.png" type="image/x-icon" />
		<!--Layui-->
		<link href="${path}/layui/css/layui.css" rel="stylesheet" />
		<!--font-awesome-->
		<link href="${path}/font-awesome/css/font-awesome.min.css" rel="stylesheet" />
		<!--全局样式表-->
		<link href="${path}/css/global.css" rel="stylesheet" />
		<link href="${path}/css/animate.min.css" rel="stylesheet" />
		<!-- 本页样式表 -->
		<link href="${path}/css/index.css" rel="stylesheet" />
		<link href="${path}/css/blog.css" rel="stylesheet" />
	</head>
	<script src="${path}/layui/layui.js"></script>
	<script src="${path}/js/jquery.min.js"></script>
	<body>
<script>

</script>
		<nav id="h" class="blog-nav layui-header">
			<div class="blog-container">

				<a href="#" class="blog-user" onclick="login()" >
					<i class="fa fa-qq"></i>
				</a>

				<a class="blog-logo" href="index.html">ZHI</a>

				<ul class="layui-nav" lay-filter="nav">
					<li class="layui-nav-item">
						<a href="${path}/index.jsp"><i class="fa fa-home fa-fw"></i>&nbsp;网站首页</a>
					</li>
					<li class="layui-nav-item">
						<a href="${path}/action/article/into"><i class="fa fa-file-text fa-fw"></i>&nbsp;文章专栏</a>
					</li>
					<li class="layui-nav-item">
						<a href="${path}/action/image/into"><i class="fa fa-paper-plane-o fa-fw"></i>&nbsp;杂七杂八</a>
					</li>
					<li class="layui-nav-item">
						<a href="${path}/action/timeline/into"><i class="fa fa-hourglass-half fa-fw"></i>&nbsp;点点滴滴</a>
					</li>
					<li class="layui-nav-item">
						<a href="${path}/action/about/into"><i class="fa fa-info fa-fw"></i>&nbsp;关于本站</a>
					</li>
					<span class="layui-nav-bar"></span>
				</ul>

				<a class="blog-navicon" href="javascript:;">
					<i class="fa fa-navicon"></i>
				</a>
			</div>
		</nav>
		
<!-- 文章主体列表模板 -->
<script  type="text/html" id="articlelist" >
 {{#  layui.each(d.data, function(index, item){ }}
    <div class="article shadow animated zoomIn">
      <div class="article-left">
        <img src="${path}/{{ item.article_temp}}" alt="{{item.article_title}}" />
      </div>
      <div class="article-right">
        <div class="article-title">
	{{# if(item.sort_va>=4) { }}
        <span class="article_is_top">置顶</span> &nbsp;
	{{#  item.sort_va-=4;} }}
	{{# if(item.sort_va>=2) {  }}
        <span class="article_is_yc">原创</span> &nbsp;
	{{#  item.sort_va-=2;} }}
	{{# if(item.sort_va==1){  }}
        <span class="article_is_zz">转载</span> &nbsp;
	{{#  } }}
	
        <a href="${path}/action/article/detail?id={{item.article_id}}">{{item.article_title}}</a></div>
        <div class="article-abstract">{{item.article_remark_content}}</div>
      </div>
      <div class="clear"></div>
      <div class="article-footer">
      <span><i class="fa fa-clock-o"></i>&nbsp;&nbsp;{{item.article_date}}</span> 
      <span class="article-author"><i class="fa fa-user"></i>&nbsp;&nbsp; {{item.user.user_nickname}}</span> 
      <span><i class="fa fa-tag"></i>&nbsp;&nbsp; 
      <a href="javascript:classifyList({{item.sal.la.lable_id}});">{{item.sal.la.lable_name}}</a></span> 
      <span class="article-viewinfo"><i class="fa fa-eye"></i>&nbsp;{{item.article_comment_count}}</span> 
      <span class="article-viewinfo"><i class="fa fa-commenting"></i>&nbsp;{{item.article_views}}</span></div></div> 
 {{#  }); }}

</script>					
<!-- 最新评论模板 -->
<script  type="text/html" id="newlist" >
 {{#  layui.each(d, function(index, item){ }}
<li class="hotusers-list-item">
	<div data-name="{{item.user.user_name}}" class="remark-user-avator">
	<img src="http://qzapp.qlogo.cn/qzapp/101477629/194135EDCD4659E5550C71D6D665F3CB/100" width="45" height="45">
	</div>
	<div class="remark-content">{{item.comment_content}}</div>
	<span class="hotusers-icons"></span>
</li> 
 {{#  }); }}

</script>	
<!-- 热评用户模板 -->
<script  type="text/html" id="hotuserlist" >
 {{#  layui.each(d, function(index, item){ }}
<li class="hotusers-list-item">
	<div class="hotusers-top hotusers-num">{{index+1}}</div>
	<div class="hotusers-avator">
	<img src="http://qzapp.qlogo.cn/qzapp/101477629/B5D5212D0429E4491D932EEEF814FE99/100" width="45" height="45">
	</div>
	<div>
	<div class="hotusers-nick">{{item.user_name}}</div>
	<span class="hotusers-level" title="等级{{item.user_level}}" style="background-image: url(https://changyan.itc.cn/v2/asset/scs/imgs/p-lv{{item.user_level}}.png);">
<i style=" background-image:url(https://changyan.itc.cn/v2/asset/scs/imgs/p-lv01-04.png);">大神</i>
</span>
	<span class="hotusers-totalcmt">本站评论数：{{item.user_temp}}</span>
	</div>
	<span class="hotusers-icons"></span>
</li>
 {{#  }); }}

</script>
				
<script >
/**
 * 读取文章数据
 */
 layui.use(['flow','jquery', 'laytpl'] ,function(){
	  var flow = layui.flow;
	  var $ = layui.jquery;
  	var laytpl = layui.laytpl;
  	var count;
	  //加载数据
	  flow.load({
		  elem: '#parentArticleList', //指定列表容器
		  isAuto:true,
		  done: function(page, next){
			  var lis = [];
			  $.ajax({
	      			url: '${path}/action/article/list?page='+page,
	      			type:'post',
	      			dataType: 'json',
	      			success: function(data) {
	      				count = data.count;
	      				
	      				var tpl = $('#articlelist').html();
	      				laytpl(tpl).render(data, function(html){
	      					lis.push(html);
	      				});
	      				/*进行自定义标签读取*/
	      				$.post('${path}/action/sort/list',function(data){
	      					switch(data.sort_alias){
	      					case 4:$('.article_is_top').html(data.sort_name);break;
	      					case 2:$('.article_is_yc').html(data.sort_name);break;
	      					case 1:$('.article_is_zz').html(data.sort_name);break;

	      					}
	      					
	      					
	      					
	      					
	      				});
	      				next(lis.join(''), page < count);  
	      			}      			
	      		});	
		   
		  		
			  
		  }
	  });
	  /*公告列表*/
		 $.ajax({
				url: '${path}/action/notice/list',
				type:'post',
				dataType: 'json',
				success: function(data) {
					var lis=[];
					$.each(data, function(index,item){
						var li='';
						li+='<span style="color: rgb(0, 150, 136); cursor: pointer; display: block;">'+item.notice_content+'</span>';
						lis.push(li);

					});
					$('.home-tips-container').append(lis.join(''));
				}      			
			});	
	  /*点击排行榜*/
	  $.ajax({
			url: '${path}/action/article/likelist',
			type:'post',
			dataType: 'json',
			success: function(data) {
				var lis=[];
				$.each(data, function(index,item){
					var li='';
					li+='<li><span><i class="layui-badge-rim ';
					switch(index){
						case 0:li+='layui-bg-red">';break;
						case 1:li+='layui-bg-orange">';break;
						case 2:li+='layui-bg-green">';break;
						default:li+='layui-badge-rim">';
					}
				
					li+=(index+1)+'</i></span> &nbsp;&nbsp;<a href="${path}/action/article/detail?id='+item.article_id+'">';
					li+=item.article_title+'</a></li>'
					lis.push(li);
						/*
						lis.push('<li><span>'
						+'<i class="layui-badge-rim layui-bg-red">'+(index+1)
						+'</i></span> &nbsp;&nbsp;<a href="detail.html">'
						+item.article_title+'</a></li>');*/
					});
			
				$('.blog-module-ul:first').append(lis.join(''));
			}      			
		});
	  /*站长推荐列表*/
	  $.ajax({
	 		url: '${path}/action/article/admlist',
	 		type:'post',
	 		dataType: 'json',
	 		success: function(data) {
	 			var lis=[];
	 			$.each(data, function(index,item){
	 				var li='';
	 				li+='<li>';
	 				 if(item.sort_va>=4) { 
				        	li+='<span class="article_is_top">置顶</span> &nbsp;';
							item.sort_va-=4;
					}
						if(item.sort_va>=2) { 
						li+='<span class="article_is_yc">原创</span> &nbsp;';
							item.sort_va-=2;
					}
					if(item.sort_va==1){ 
						li+='<span class="article_is_zz">转载</span> &nbsp;';
					}
	 				li+='<a href="${path}/action/article/detail?id='+item.article_id+'">'+item.article_title+'</a></li>';
	 				lis.push(li);
	 				});
	 		
	 			$('.blog-module-ul:last').append(lis.join(''));
	 		}      			
	 	});	
	
	  /*最新评论加载*/
	  $.ajax({
			url: '${path}/action/comment/newlist',
			async:false,
			type:'post',
			dataType: 'json',
			success: function(data) {
				var tp2 = $('#newlist').html();
  				laytpl(tp2).render(data, function(html){
  					$('#news').append(html);
			
  				});  
			}
		});	
	
	  /*最热评论用户加载*/
	  $.ajax({
			url: '${path}/action/user/hotusers',
			type:'post',
			dataType: 'json',
			success: function(data) {
				var tp3 = $('#hotuserlist').html();
  				laytpl(tp3).render(data, function(html){
  					$('#users').append(html);
			
  				});  
			}
		});	
	  /*友情链接列表*/
		 $.ajax({
				url: '${path}/action/links/getlinks',
				type:'post',
				dataType: 'json',
				success: function(data) {
					var lis=[];
					$.each(data, function(index,item){
						var li='';
						li+='<li><a target="_blank" href="'+item.friend_links;
						li+='"title="'+item.friend_link_name+'">'+item.friend_link_name+'</a></li>';
						lis.push(li);
						});
				
					$('.blogroll').append(lis.join(''));
				}      			
			});	
		

	});

	
	 
</script>		
<!--<div class="blog-user"></div>  -->
		

		<div class="blog-body">
			<div class="layui-carousel blog-bg" id="carousel" lay-anim="default" lay-indicator="inside" lay-arrow="always" style="width: 1170px; height: 360px;">
				<div carousel-item="">
					<div class="bg bg_a"></div>
					<div class="bg bg_b"></div>
					<div class="bg bg_c layui-this"></div>
					<div class="bg bg_d"></div>
					<div class="bg bg_e"></div>
				</div>
				<div class="layui-carousel-ind">
					<ul>
						<li class=""></li>
						<li class=""></li>
						<li class="layui-this"></li>
						<li class=""></li>
						<li class=""></li>
					</ul>
				</div><button class="layui-icon layui-carousel-arrow" lay-type="sub"></button><button class="layui-icon layui-carousel-arrow" lay-type="add"></button></div>
			<div class="blog-container">
				<div class="blog-main">

					<div class="home-tips shadow">
						<i style="float:left;line-height:17px;" class="fa fa-volume-up"></i>
					<!---------------------------- 公告列表----------------------------------->
						
						<div class="home-tips-container">
						</div>
					</div>

<!---------------------------- 文章列表----------------------------------->
					<div class="blog-main-left animated slideInLeft">
						<div class="flow-default" id="parentArticleList">
						
							
						</div>
						
						
					</div>

					<div class="blog-main-right">
	<!----------------------------------- 个人简介 ---------------------->
						<div class="blogerinfo shadow animated fadeInRight">
							<div class="blogerinfo-figure">
								<img src="${path}/img/admin.PNG" alt="竹林听雨">
							</div>
							<p class="blogerinfo-nickname">ZHI</p>
							<p class="blogerinfo-introduce">有个被嘲笑的梦想万一有天实现了呢？up up~</p>
							<p class="blogerinfo-location"><i class="fa fa-location-arrow"></i>&nbsp;<span>新疆-乌鲁木齐</span></p>
							<hr>
							<div class="blogerinfo-contact">
								<a target="_blank" id="QQjl" title="QQ交流" href=#"><i class="fa fa-qq fa-2x"></i></a>
								<a target="_blank" id="gwxx" title="给我写信" href=#"><i class="fa fa-envelope fa-2x"></i></a>
								<a target="_blank" id="xlwb" title="新浪微博" href="#"><i class="fa fa-weibo fa-2x"></i></a>
								<a onclick="adlogin()"id="htgl" title="后台管理" href="#"><i class="fa fa-database fa-2x"></i></a>
							</div>
						</div>

						<div class="layui-tab layui-tab-brief shadow animated fadeInRight" lay-filter="docDemoTabBrief">
							<ul class="layui-tab-title">
								<li class="layui-this">点击排行</li>
								<li>站长推荐</li>
							</ul>
							<div class="layui-tab-content">
								<!--点击排行榜 -->
								<div class="layui-tab-item layui-show">
									<ul class="blog-module-ul">
										
									</ul>
								</div>
								<!-- 站长推荐 -->
								<div class="layui-tab-item">
									<ul class="blog-module-ul">
									
								
									</ul>
								</div>
							</div>
						</div>

						<div class="blog-module shadow animated fadeInRight">
							<div class="blog-module-title"><i class="fa fa-file-text-o"></i>&nbsp;博主介绍</div>
							<p>ZHI，一个java程序员，好奇心比较强，目前是一个学生，想要从事Java方向的研究和开发。-- ZHI</p>
						</div>
						<!-- 最热用户区域 -->
						<div class="blog-module shadow animated fadeInRight fadeInUp">
							<div class="blog-module-title"><i class="layui-icon"></i>&nbsp;热评用户</div>

							<ul class="hotusers-list" id="users">
							


							</ul>
						</div>
		<!-- 热评区域  -->
						<div class="blog-module shadow animated fadeInRight fadeInUp">
							<div class="blog-module-title"><i class="layui-icon"></i>&nbsp;最近评论</div>
							<ul class="recent-list" id="news">
							
						
							</ul>
						</div>
<!-- 友情链接区域 -->
						<div class="blog-module shadow animated fadeInRight">
							<div class="blog-module-title"><i class="fa fa-link"></i>&nbsp;友情链接</div>
							<ul class="blogroll">
								<li>
									<a target="_blank" href="http://wurao.xin" title="勿扰博客">勿扰博客</a>
								</li>
							
							</ul>
						</div>
					</div>
				</div>
				<div class="clear"></div>
			</div>
		</div>

		<footer id="f" class="blog-footer">
			<p><span>Copyright</span><span>©</span><span>2019</span>
				<a href="${path}/index.jsp">ZHI博客</a><span>Design By ZHI TEAM</span></p>
			<p>
				<a href="http://www.miitbeian.gov.cn" target="_blank">小学期课题</a>
			</p>
		</footer>

		<ul class="layui-nav layui-nav-tree layui-nav-side blog-nav-left layui-hide" lay-filter="nav">
			<li class="layui-nav-item">
				<a href="${path}/index.jsp"><i class="fa fa-home fa-fw"></i>&nbsp;网站首页</a>
			</li>
			<li class="layui-nav-item">
				<a href="${path}/action/article/into"><i class="fa fa-file-text fa-fw"></i>&nbsp;文章专栏</a>
			</li>
			<li class="layui-nav-item">
				<a href="${path}/action/image/into"><i class="fa fa-paper-plane-o fa-fw"></i>&nbsp;杂七杂八</a>
			</li>
			<li class="layui-nav-item">
				<a href="${path}/action/timeline/into"><i class="fa fa-road fa-fw"></i>&nbsp;点点滴滴</a>
			</li>
			<li class="layui-nav-item">
				<a href="${path}/action/about/into"><i class="fa fa-info fa-fw"></i>&nbsp;关于本站</a>
			</li>
			<span class="layui-nav-bar"></span>
		</ul>


		<div class="blog-share layui-hide">
			<div class="blog-share-body">
				<div style="width: 200px;height:100%;">
					<div class="bdsharebuttonbox bdshare-button-style0-32" data-bd-bind="1533783041273">
						<a class="bds_qzone" data-cmd="qzone" title="分享到QQ空间"></a>
						<a class="bds_tsina" data-cmd="tsina" title="分享到新浪微博"></a>
						<a class="bds_weixin" data-cmd="weixin" title="分享到微信"></a>
						<a class="bds_sqq" data-cmd="sqq" title="分享到QQ好友"></a>
					</div>
				</div>
			</div>
		</div>

		<div class="blog-mask animated layui-hide"></div>



		<script src="js/global.js"></script>
		<script src="js/index.js"></script>
	</body>

</html>
